<template>
    <el-container class="min-h-screen bg-cover" :style="{ backgroundImage: `url('${background}')` }">
        <div class="order">
            <div class="group_btn">
                订单页面
            </div>
            <el-table
                    :data="orderlist"
            >
                <el-table-column prop="orderId" label="订单编号" width="320" align="center">
                </el-table-column>
                <el-table-column prop="orderSum" label="订单总价" width="200" align="center"></el-table-column>
                <el-table-column prop="gmtCreate" label="创建时间" width="480" align="center">
                </el-table-column>
                    <!--<template slot-scope="scope">-->

                    <!--</template>-->


                <el-table-column width="300" label="操作" align="center">
                    <template slot-scope="scope">
                        <el-button type="primary" plain @click="xiangqing(scope.row.orderId)">详情</el-button>
                        <el-button type="danger" plain @click="delete1(scope.row.orderId)">删除</el-button>
                        <el-button type="info" plain v-show="status(scope.$index)==0" @click="pay(scope.row)">付款</el-button>
                    </template>
                </el-table-column>

            </el-table>
            <el-pagination
                    background
                    :current-page="pageNum"
                    :page-size="pageSize"
                    :total="total"
                    style="padding: 30px 0;text-align: center"
                    layout="total,prev, pager, next,jumper"
                    @current-change="getOrderList"
            />
        </div>

    </el-container>
</template>


<script scoped>
    import bigorder from '@/api/bigorder'
    import cart from "../api/cart";

    export default {
        data() {
            return {
                pageNum: 1,//-- 当前页
                pageSize: 5,//-- 每页条数
                uid: 1,
                multipleSelection: [],
                orderlist: null,
                total: 0,
                oiStatus:[],
                out_trade_no:'',
                subject:'迪士尼VIP票',
                total_amount:'',
                body:'非常之好',
                background: require('@/assets/backgroud/bk3.jpg'),

            }
        },
        created() {
            //-- 生命周期方法，页面渲染之前执行。
            this.getOrderList()

    },
        methods: {
            getOrderList(current = 1) {
                this.uid = JSON.parse(localStorage.getItem("Authorization")).userId
                this.pageNum = current
                bigorder.list(this.pageNum, this.pageSize, this.uid).then(response => {
                    this.orderlist = response.data.data.orderlist
                    this.oiStatus = response.data.data.oiStatus
                    this.total = response.data.data.total
                })
            },

            xiangqing(index) {
                console.log(index)
                this.$router.push("/orderlist/" + index)
            },
            delete1(index) {

                bigorder.deleteorder(index).then(response => {

                    this.getOrderList()
                })
            },
            status(index) {
                return this.oiStatus[index]

            },


            pay(row) {
                /*
                            let postData = `out_trade_no = ${this.out_trade_no}&subject=${this.subject}&total_amount=${this.total_amount}&body=${this.body}`
            */
                /*                out_trade_no=this.orderitems[0].oiOrderid
                                subject:'',
                                total_amount=this.sumPrice(),
                                body:''*/


                bigorder.updateS(row.orderId).then(response => {
                    this.getOrderList()
                })

                this.out_trade_no = row.orderId
                this.total_amount = row.orderSum


                let param = new URLSearchParams()
                param.append('out_trade_no', this.out_trade_no)
                param.append('subject', this.subject)
                param.append('total_amount', this.total_amount)
                param.append('body', this.body)
                cart.pay(param)
                    .then(response => {
                        document.querySelector('body').innerHTML = response.data;//查找到当前页面的body，将后台返回的form替换掉他的内容
                        document.forms[0].submit();  //执行submit表单提交，让页面重定向，跳转到支付宝页面
                    })
            },
        },
        computed: {

        }
    }
</script>

<style scoped>

    /*最外层透明*/
    /deep/ .el-table, /deep/ .el-table__expanded-cell {
        background-color: transparent;
    }

    /* 表格内背景颜色 */
    /deep/ .el-table th,
    /deep/ .el-table tr,
    /deep/ .el-table td {
        background-color: rgba(145, 192, 252, 0.15);
        color: white;
    }

    .order {
        margin: 50px auto;
        width: 1300px;
    }

    .group_btn {
        text-align: center;
        color: white;
        font-size: 40px;
        margin-bottom: 20px;
    }

    .total_warpper {
        text-align: right;
        margin-top: 30px;
    }

    h3 {
        margin-top: 10px;
    }
</style>